<script setup>
import router from "../../router/index.js";
import MyNav from "../../components/MyNav.vue";
import MyForm from "../../components/MyForm.vue";
import MyUploader from "../../components/MyUploader.vue";
import { reactive, ref } from "vue";
import { RULE } from "../../const/index.js";
import { ElMessage } from "element-plus";
import { updateApi } from "../../api/axios.js";
import { GENDER_OPTIONS, ZODIAC_OPTIONS } from "../../const/project.js";
import { UPLOAD_AVATAR_URL, updatePasswordApi } from "../../api/ums/user.js";

// 获取当前登录的用户记录
let loginUser = JSON.parse(sessionStorage.getItem('loginUser'));

// 页面常量
// 路径导航
const navItems = [
  { icon: 'House', label: 'DashBoard', url: '/DashBoard' },
  { icon: 'Edit', label: '修改个人信息' }
];

// 表单项 + 表单值 + 表单规则
let updateFormItems = ref([
  { label: '登录账号', prop: 'username', disabled: true },
  { label: '真实姓名', prop: 'realname', disabled: true },
  { label: '手机号码', prop: 'phone', disabled: true },
  { label: '身份证号', prop: 'idcard', disabled: true },
  { label: '用户昵称', prop: 'nickname', span: 12 },
  { label: '用户邮箱', prop: 'email', span: 12 },
  { label: '用户性别', prop: 'gender', span: 12, type: 'select', options: GENDER_OPTIONS },
  { label: '用户年龄', prop: 'age', span: 12, type: 'number' },
  { label: '用户星座', prop: 'zodiac', span: 12, type: 'select', options: ZODIAC_OPTIONS },
  { label: '用户省份', prop: 'province', span: 12 },
  { label: '用户描述', prop: 'info', type: 'textarea', rows: 7 },
]);
let updateFormData = reactive(loginUser);
let updateFormRules = {
  nickname: RULE.NICKNAME,
  email: RULE.EMAIL,
  zodiac: RULE.ZODIAC,
  province: RULE.PROVINCE,
  info: RULE.INFO
};

// 表单项 + 表单值 + 表单规则 修改个人密码
let updatePasswordItems = ref([
  { label: '原密码', prop: 'oldPassword', type: 'password', required: true, placeholder: '输入原密码' },
  { label: '新密码', prop: 'newPassword', type: 'password', required: true, placeholder: '输入新密码' },
  { label: '确认密码', prop: 'rePassword', type: 'password', required: true, placeholder: '确认新密码' },
]);
let updatePasswordData = reactive({ id: loginUser['id']});
let updatePasswordRules = {
  oldPassword: RULE.PASSWORD,
  newPassword: [
    {pattern: RULE.PASSWORD[0].pattern, message: RULE.PASSWORD[0].message},
    {
      validator: (rule, value, callback) => {
        if (value === updatePasswordData['oldPassword']) callback('新旧密码不能相同');
        else callback();
      }
    }
  ],
  rePassword: [
    {pattern: RULE.PASSWORD[0].pattern, message: RULE.PASSWORD[0].message},
    {
      validator: (rule, value, callback) => {
        if (value !== updatePasswordData['newPassword']) callback('两次密码不一致');
        else callback();
      }
    }
  ],
};

/**
 * 修改成功后
 * 提示“修改个人信息后需要重新登录！”
 * 1秒钟后跳入登录页面
 */
/*function updateSuccess() {
  ElMessage('修改成功！');
  setTimeout(() => router.push('/Personal'), 1000);
}*/

function updateSuccess() {
  ElMessage({ message: '修改个人信息后需要重新登录！', type: 'warning' });
  setTimeout(() => router.push('/'), 1000);
}
</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <div class="personal-update-body">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="update-card" header="修改基本信息">
          <my-form type="update"
                   :items="updateFormItems"
                   :rules="updateFormRules"
                   :api="updateApi"
                   :args="{module: 'user'}"
                   :params="updateFormData"
                   :callback="updateSuccess"/>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="upload-avatar-card" header="上传个人头像">
          <my-uploader name="avatarFile"
                       :url="UPLOAD_AVATAR_URL + loginUser['id']"
                       :showFileList="false"
                       :autoUpload="true"
                       :callback="updateSuccess"/>
        </el-card>
        <el-card class="update-password-card" header="修改个人密码">
          <my-form type="update"
                   :items="updatePasswordItems"
                   :rules="updatePasswordRules"
                   :api="updatePasswordApi"
                   :params="updatePasswordData"
                   :callback="updateSuccess"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.personal-update-body {
  width: 90%; // 宽度
  margin: 20px auto 0; // 外边距

  .update-password-card {
    margin-top: 20px; // 上外边距
  }
}
</style>